<template>
  <a-modal
    title="使用情况"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    destroyOnClose
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-spin :spinning="confirmLoading">
      <a-form class="mb-2" :form="form" layout="inline">
        <a-form-item label="时间">
          <a-select
            v-model="years"
            size="small"
            placeholder="请选择年份"
            style="width: 200px"
            @change="handleChangeYear"
          >
            <a-select-option
              :disabled='item.disable'
              :value="item.value"
              v-for="item in yearList"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button size="small" type="primary" @click="handleSubmit">查询</a-button>
          <!--              <a-button style="margin-left: 8px" @click="buildCharts">重置</a-button>-->
        </a-form-item>
      </a-form>
      
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="charts" id="main" style="width: 100%;height:400px;"></div>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  outStoreAnalysis,   //物料使用情况
  referenceStatistics //bom引用情况
} from '@/api/modular/main/emsmaterial/emsMaterialManage'

export default {
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15}
      },
      labelColBlock: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperColBlock: {
        xs: {span: 24},
        sm: {span: 18}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      queryParam: {},
      years: [],
      yearList: [],
      record: {},
    }
  },
  methods: {
    show(record) {
      this.yearList = this.createYearList()
      console.log(record)
      this.visible = true
      this.record = record
      this.years = [String(new Date().getFullYear())]
      this.handleSubmit()
    },
    handleChangeYear(e) {
      this.years = [e]
    },
    
    handleSubmit() {
      outStoreAnalysis({
        materialId: this.record.materialId,
        times: this.years
      }).then(res => {
        this.buildCharts(res.data)
      })
    },
    handleCancel() {
      this.visible = false
      this.years = []
    },
    buildCharts(responseData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))
      
      
      let xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      let yData = {
        data1: [], //生产出库数量
        data2: [], //采购入库数量
        data3: [], //生产退库数量
        data4: [], //发货退库数量
      }
      // 如果图表有数据
      if (responseData) {
        responseData.forEach((item) => {
          item.month.forEach(innerItem => {
            yData.data1.push(innerItem.number)  //生产出库数量
            yData.data2.push(innerItem.warehousingNumber) //采购入库数量
            yData.data3.push(innerItem.scReturnNumber) //生产退库数量
            yData.data4.push(innerItem.fhReturnNumber) //发货退库数量
          })
        })
      }
      
      
      // 指定图表的配置项和数据
      let option = {
        color: ["#ffdf25", "#36a9ce",],
        legend: {type: "plain"},
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "shadow",
          // },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: {show: false},
            data: xData
          },
        ],
        yAxis: [
          {
            type: "value",
            name: '数量'
          },
        ],
        series: [
          {
            name: '生产出库数量',
            type: 'bar',
            color: '#4a2188',
            prop: 'discountingOne',
            data: yData.data1
          },
          {
            name: '采购入库数量',
            type: 'bar',
            color: '#4888df',
            prop: 'discountingTwo',
            data: yData.data2
          }, {
            name: '生产退库数量',
            type: 'bar',
            color: '#257730',
            prop: 'discountingThree',
            data: yData.data3
          },
          {
            name: '发货退库数量',
            type: 'bar',
            color: '#18d5d5',
            prop: 'discountingFour',
            data: yData.data4
          },
        ],
      }
      
      
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option, true)
      // myChart1.setOption(option1)
    }
  }
}
</script>